<template>
	<view class="main-container">
		<view class="qrcode-conatainer">
			<view class="qrcode-conatainer-content">
				<view class="qrcode-conatainer-title">
					<view class="qrcode-header"><image :src="customerInfo.HeadImg" style="width: 120rpx;height: 120rpx;border-radius: 20rpx;" class="header-img"></image></view>
					<view class="qrcode-header-content">
						<view>{{ customerInfo.NickName }}</view>
						<view>{{ customerInfo.UserNumber }}</view>
					</view>
				</view>
				<view class="qrimg-i">
					<tki-qrcode
						cid="qrcode1"
						ref="qrcode"
						:val="val"
						:size="size"
						:unit="unit"
						:background="background"
						:foreground="foreground"
						:pdground="pdground"
						:icon="icon"
						:iconSize="iconsize"
						:lv="lv"
						:onval="onval"
						:loadMake="loadMake"
						:usingComponents="true"
					/>
				</view>
				<view class="qrcode-bottom-tips">有效期：3分钟</view>
				<view class="qrcode-bottom-operation" @click="refreshMyQrCode">
					<image class="refresh-icon" src="@/static/images/refresh-cion.png"></image>
					<span>刷新二维码</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
import { errorToShow } from '@/config/common.js';
import { base64Encode } from '@/config/utils.js';
import { formatDate } from '@/config/common.js';

export default {
	components: {
		tkiQrcode
	},
	data() {
		return {
			val: '', // 要生成的二维码值
			size: 200, // 二维码大小
			unit: 'rpx', // 单位
			background: '#fff', // 背景色
			foreground: '#333', // 前景色
			pdground: '#333', // 角标色
			icon: '', // 二维码图标
			iconsize: 40, // 二维码图标大小
			lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
			onval: false, // val值变化时自动重新生成二维码
			loadMake: false, // 组件加载完成后自动生成二维码
			customerInfo: {}
		};
	},
	onLoad: function() {
		this.initOptionParam();
	},

	methods: {
		initOptionParam(option) {
			this.customerInfo = uni.getStorageSync('customerInfo');
			if (this.customerInfo.UserNumber) {
				this.generateMyQrcode();
			} else {
				errorToShow('参数错误');
				this.backBeforePage();
			}
		},
		generateMyQrcode() {
			let qrDateParam = {
				UserNumber: this.customerInfo.UserNumber,
				generateDate: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
				type: '1'
			};
			this.val = base64Encode(JSON.stringify(qrDateParam));
			this.createQrcode();
		},
		backBeforePage() {
			setTimeout(function() {
				uni.navigateBack();
			}, 1500);
		},
		refreshMyQrCode() {
			this.generateMyQrcode();
		},
		createQrcode() {
			const that = this;
			setTimeout(() => {
				that.$refs.qrcode._makeCode();
			}, 100);
		}
	}
};
</script>

<style scoped lang="scss">
.main-container {
	height: 100vh;
	overflow: hidden;
}
.qrcode-conatainer {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	margin-top: 10vh;
}
.qrcode-conatainer-content {
	width: 90%;
	background-color: #fff;
	height: 80%;
	max-height: 870rpx;
	border-radius: 6px;
	box-shadow: darkgrey 0px 2px 6px 0px;
}
.qrcode-conatainer-title {
	width: 100%;
	font-size: $main-text-size-32;
	display: flex;
	padding: 24rpx;
}
.qrimg-i {
	height: auto;
	text-align: center;
	margin-top: 40rpx;
}
.qrcode-header {
	margin-right: 24rpx;
}

.qrcode-header-content {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	color: #333;
}
.qrcode-bottom-operation {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #0059f1;
    padding-right: 21rpx;
	.refresh-icon {
		width: 35rpx;
		height: 35rpx;
		margin-right: 10rpx;
	}
}
.qrcode-bottom-tips {
	color: $main-text-color-grey;
	text-align: center;
	margin-bottom: 40rpx;
	font-size: $main-text-size-24;
}
</style>
